
:host /deep/ {
  .free-error-page {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    &:before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 50%;
      background: #EDECEC;
    }

    .free-error-board {
      background: #00bcd4;
      box-shadow: 0 1px 11px rgba(0,0,0,0.27);
      border-radius: 2px;
      position: absolute;
      top: 50%;
      margin-top: -150px;
      color: #fff;
      text-align: center;
      padding: 15px;
      height: 300px;
      width: 500px;
      left: 50%;
      margin-left: -250px;

      h2 {
        line-height: 100%;
        color: #fff;
        font-weight: 100;
        font-size: 6rem;
      }

      footer {
        background: rgba(0,0,0,0.13);
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        padding: 10px;
        display: flex;
        justify-content: center;

        free-icon {
          display: inline-block;
          color: #FFF;
          margin: 0 3px;
          line-height: 40px;
          width: 40px;
          height: 40px;
          background: rgba(0,0,0,0.09);
          border-radius: 50%;
          text-align: center;
          cursor: pointer;
          transition: all;
          -webkit-transition-duration: 300ms;
          transition-duration: 300ms;

          &:hover {
            background: rgba(0,0,0,.2);
          }
        }
      }
    }

    .free-error-intro {
      overflow: hidden;
      white-space: nowrap;
    }
  }
}

//@each $theme, $color in $theme {
//  :host-context(.free-theme-#{$theme}) /deep/ {
//    .free-error-page .free-error-board {
//      background: $color;
//    }
//  }
//}
